<template>
  <div class="app" @click="close">
    <div class="header">
      <el-button type="success" @click="preview('loading1')" :loading="loading.loading1" :disabled="loading.loading2 || diyModule.length == 0">保存</el-button>
      <el-button type="success" @click="preview('loading2')" :loading="loading.loading2" :disabled="loading.loading1 || diyModule.length == 0">预览并保存</el-button>
    </div>
    <div class="content">
      <LeftNav />
      <Content />
      <transition name="right"><Attr v-if="showAttr"/></transition>
    </div>
  </div>
</template>

<script>
import { mapState} from 'vuex'
import LeftNav from '@/components/left-nav'
import Content from '@/components/content'
import Attr from '@/components/attr'
export default {
  // name: 'Index',
  components:{ LeftNav,Content,Attr },
  data() {
    return {
      loading: {
        loading1: false,
        loading2: false
      }
    }
  },
  computed:{
    ...mapState(['showAttr', 'diyModule'])
  },
  methods: {
    close(){
      this.$store.commit('toggleAttr', false)
      this.$store.dispatch('pushAttr',{})   // 清空属性
    },
    preview(key){
      this.$store.commit('preview')
      this.loading[key] = true
      setTimeout(() => {
        this.loading[key] = false
        this.$notify({
          title: '保存成功',
          message: '请在控制台查看数据结构',
          type: 'success'
        });
        console.log('控件数据：',JSON.parse(JSON.stringify(this.$store.state.controls)))
        console.log('模块数据：',JSON.parse(JSON.stringify(this.$store.state.diyModule))) 
      }, 1000);
    }
  },
}
</script>

<style lang="scss" scoped>
.app{display: flex;flex-direction: column;height: 100vh;
  &>div{width: 100%}
  .header{height: 65px;background: #fff;flex: none;display: flex;align-items: center;justify-content: flex-end;box-shadow: 0px 4px 9px 0px #afafaf45;z-index: 1;padding-right: 40px;box-sizing: border-box;}
  .content{flex: 1;height: calc(100vh - 65px);display: flex;position: relative}
}
</style>
